<template>
  <div class="profile-container">
    <el-row :gutter="20">
      <!-- 左侧主内容区 -->
      <el-col :span="16">
        <div class="profile-content">
          <!-- 用户信息 -->
          <div class="user-header">
            <h1 class="username">陌上倾城落蝶雨</h1>
            <div class="user-questions">
              <div class="question-item">• 你从那个公职处？</div>
              <div class="question-item">• 你的人生格言是什么？</div>
            </div>
          </div>

          <!-- 导航标签 -->
          <el-tabs v-model="activeTab" class="profile-tabs">
            <el-tab-pane label="动态" name="dynamic">
              <div class="tab-content">
                <div v-for="(post, index) in posts" :key="index" class="post-item">
                  <div class="post-header">
                    <span class="post-username">{{ post.username }}</span>
                    <span class="post-time">{{ post.time }}</span>
                  </div>
                  <div class="post-content">
                    <h4>{{ post.title }}</h4>
                    <p>{{ post.content }}</p>
                  </div>
                  <div class="post-actions">
                    <span class="action-item"><i class="el-icon-thumb"></i> {{ post.likes }}</span>
                    <span class="action-item"><i class="el-icon-chat-line-round"></i> {{ post.comments }}</span>
                    <span class="action-item"><i class="el-icon-share"></i> 分享</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="文章" name="article">
              <div class="tab-content">
                <div v-for="(article, index) in articles" :key="index" class="article-item">
                  <h3 class="article-title">{{ article.title }}</h3>
                  <p class="article-summary">{{ article.summary }}</p>
                  <div class="article-meta">
                    <span class="meta-item"><i class="el-icon-time"></i> {{ article.time }}</span>
                    <span class="meta-item"><i class="el-icon-view"></i> {{ article.views }} 阅读</span>
                    <span class="meta-item"><i class="el-icon-thumb"></i> {{ article.likes }} 点赞</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="专栏" name="column">
              <div class="empty-tab">暂无专栏</div>
            </el-tab-pane>

            <el-tab-pane label="沸点" name="boiling">
              <div class="tab-content">
                <div v-for="(boiling, index) in boilings" :key="index" class="boiling-item">
                  <p>{{ boiling.content }}</p>
                  <div class="boiling-meta">
                    <span class="meta-item"><i class="el-icon-time"></i> {{ boiling.time }}</span>
                    <span class="meta-item"><i class="el-icon-thumb"></i> {{ boiling.likes }}</span>
                  </div>
                </div>
              </div>
            </el-tab-pane>

            <el-tab-pane label="收藏集" name="collection">
              <div class="collection-info">
                <div class="info-item">
                  <span class="info-label">收藏集</span>
                  <span class="info-value">6</span>
                </div>
                <div class="info-item">
                  <span class="info-label">关注标签</span>
                  <span class="info-value">4</span>
                </div>
                <div class="info-item">
                  <span class="info-label">加入于</span>
                  <span class="info-value">2023-06-08</span>
                </div>
              </div>

              <div class="collections-list">
                <div v-for="(collection, index) in collections" :key="index" class="collection-item">
                  <h4>{{ collection.name }}</h4>
                  <p>{{ collection.count }} 条内容 · 创建于 {{ collection.created }}</p>
                </div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </el-col>

      <!-- 右侧个人成就 -->
      <el-col :span="8">
        <div class="achievement-card sticky-card">
          <h3 class="achievement-title">个人成就</h3>
          <div v-for="(achievement, index) in achievements" :key="index" class="achievement-item">
            <span class="achievement-label">{{ achievement.label }}</span>
            <span class="achievement-value">{{ achievement.value }}</span>
          </div>

          <el-divider />

          <h3 class="achievement-title">社交信息</h3>
          <div v-for="(social, index) in socialInfo" :key="index" class="achievement-item">
            <span class="achievement-label">{{ social.label }}</span>
            <span class="achievement-value">{{ social.value }}</span>
          </div>

          <el-divider />

          <h3 class="achievement-title">最近访客</h3>
          <div class="visitors-list">
            <div v-for="(visitor, index) in recentVisitors" :key="index" class="visitor-item">
              <el-avatar :size="40" :src="visitor.avatar"></el-avatar>
              <span class="visitor-name">{{ visitor.name }}</span>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const activeTab = ref('dynamic')

// 动态数据
const posts = ref([
  {
    username: '陌上倾城落蝶雨',
    time: '3月前',
    title: 'git步骤',
    content: '带着"git clone <仓库网址> cd #用edit进入到你的文件夹.git add #添加单个文件.git add，#添加所有修改过的文件。',
    likes: 24,
    comments: 5
  },
  {
    username: '陌上倾城落蝶雨',
    time: '3月前',
    title: 'python环境安装',
    content: 'Traceback (most recent call last): File "D:\python\python_projecttest01.py" line 3',
    likes: 18,
    comments: 3
  },
  {
    username: '陌上倾城落蝶雨',
    time: '4月前',
    title: 'Vue3 组合式API实践',
    content: '最近尝试了Vue3的组合式API，相比Options API确实更灵活，代码组织也更清晰。特别是setup函数让逻辑复用变得简单。',
    likes: 56,
    comments: 12
  },
  {
    username: '陌上倾城落蝶雨',
    time: '5月前',
    title: 'TypeScript 类型挑战',
    content: '完成了TypeScript类型挑战的中级题目，对泛型、条件类型和infer的理解更深了。推荐大家也去试试type-challenges这个仓库。',
    likes: 42,
    comments: 8
  }
])

// 文章数据
const articles = ref([
  {
    title: '深入理解Vue3响应式原理',
    summary: '本文将带你深入理解Vue3的响应式系统，从reactive、ref到effect，剖析其实现原理。',
    time: '2023-08-15',
    views: 1245,
    likes: 89
  },
  {
    title: 'TypeScript中的高级类型技巧',
    summary: '分享一些TypeScript中实用的高级类型技巧，包括条件类型、映射类型和模板字面量类型等。',
    time: '2023-07-22',
    views: 876,
    likes: 64
  },
  {
    title: '前端性能优化实战',
    summary: '记录一次大型项目的前端性能优化过程，从分析到实施，最终性能提升40%的经验总结。',
    time: '2023-06-10',
    views: 1532,
    likes: 112
  },
  {
    title: '深入理解Vue3响应式原理',
    summary: '本文将带你深入理解Vue3的响应式系统，从reactive、ref到effect，剖析其实现原理。',
    time: '2023-08-15',
    views: 1245,
    likes: 89
  },
  {
    title: 'TypeScript中的高级类型技巧',
    summary: '分享一些TypeScript中实用的高级类型技巧，包括条件类型、映射类型和模板字面量类型等。',
    time: '2023-07-22',
    views: 876,
    likes: 64
  },
  {
    title: '前端性能优化实战',
    summary: '记录一次大型项目的前端性能优化过程，从分析到实施，最终性能提升40%的经验总结。',
    time: '2023-06-10',
    views: 1532,
    likes: 112
  },
  {
    title: '深入理解Vue3响应式原理',
    summary: '本文将带你深入理解Vue3的响应式系统，从reactive、ref到effect，剖析其实现原理。',
    time: '2023-08-15',
    views: 1245,
    likes: 89
  },
  {
    title: 'TypeScript中的高级类型技巧',
    summary: '分享一些TypeScript中实用的高级类型技巧，包括条件类型、映射类型和模板字面量类型等。',
    time: '2023-07-22',
    views: 876,
    likes: 64
  },
  {
    title: '前端性能优化实战',
    summary: '记录一次大型项目的前端性能优化过程，从分析到实施，最终性能提升40%的经验总结。',
    time: '2023-06-10',
    views: 1532,
    likes: 112
  },
  {
    title: '深入理解Vue3响应式原理',
    summary: '本文将带你深入理解Vue3的响应式系统，从reactive、ref到effect，剖析其实现原理。',
    time: '2023-08-15',
    views: 1245,
    likes: 89
  },
  {
    title: 'TypeScript中的高级类型技巧',
    summary: '分享一些TypeScript中实用的高级类型技巧，包括条件类型、映射类型和模板字面量类型等。',
    time: '2023-07-22',
    views: 876,
    likes: 64
  },
  {
    title: '前端性能优化实战',
    summary: '记录一次大型项目的前端性能优化过程，从分析到实施，最终性能提升40%的经验总结。',
    time: '2023-06-10',
    views: 1532,
    likes: 112
  },
  {
    title: '深入理解Vue3响应式原理',
    summary: '本文将带你深入理解Vue3的响应式系统，从reactive、ref到effect，剖析其实现原理。',
    time: '2023-08-15',
    views: 1245,
    likes: 89
  },
  {
    title: 'TypeScript中的高级类型技巧',
    summary: '分享一些TypeScript中实用的高级类型技巧，包括条件类型、映射类型和模板字面量类型等。',
    time: '2023-07-22',
    views: 876,
    likes: 64
  },
  {
    title: '前端性能优化实战',
    summary: '记录一次大型项目的前端性能优化过程，从分析到实施，最终性能提升40%的经验总结。',
    time: '2023-06-10',
    views: 1532,
    likes: 112
  },
  {
    title: '深入理解Vue3响应式原理',
    summary: '本文将带你深入理解Vue3的响应式系统，从reactive、ref到effect，剖析其实现原理。',
    time: '2023-08-15',
    views: 1245,
    likes: 89
  },
  {
    title: 'TypeScript中的高级类型技巧',
    summary: '分享一些TypeScript中实用的高级类型技巧，包括条件类型、映射类型和模板字面量类型等。',
    time: '2023-07-22',
    views: 876,
    likes: 64
  },
  {
    title: '前端性能优化实战',
    summary: '记录一次大型项目的前端性能优化过程，从分析到实施，最终性能提升40%的经验总结。',
    time: '2023-06-10',
    views: 1532,
    likes: 112
  }

])

// 沸点数据
const boilings = ref([
  {
    content: '今天发现一个超好用的VSCode插件 - Error Lens，可以直接在代码行内显示错误信息，不用再去看问题面板了！',
    time: '2天前',
    likes: 32
  },
  {
    content: '有人用过Turborepo吗？最近在考虑用这个来管理我们的monorepo项目，不知道实际体验如何？',
    time: '1周前',
    likes: 18
  },
  {
    content: '前端早读课：《如何设计一个优秀的组件库》，推荐阅读！',
    time: '2周前',
    likes: 25
  }
])

// 收藏集数据
const collections = ref([
  {
    name: '前端开发资源',
    count: 42,
    created: '2023-06-10'
  },
  {
    name: 'TypeScript学习',
    count: 18,
    created: '2023-07-05'
  },
  {
    name: 'UI设计灵感',
    count: 27,
    created: '2023-08-12'
  }
])

// 个人成就数据
const achievements = ref([
  { label: '文章成绩', value: '20' },
  { label: '文章等级', value: '4,141' },
  { label: '能力值', value: '359' },
  { label: '创作积分', value: '1,245' },
  { label: '活跃天数', value: '128' }
])

// 社交信息
const socialInfo = ref([
  { label: '关注了', value: '8' },
  { label: '关注者', value: '18' },
  { label: '获得点赞', value: '256' },
  { label: '获得收藏', value: '189' }
])

// 最近访客
const recentVisitors = ref([
  { name: '技术小达人', avatar: 'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png' },
  { name: '前端开发', avatar: 'https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png' },
  { name: '代码艺术家', avatar: 'https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png' },
  { name: '全栈工程师', avatar: 'https://cube.elemecdn.com/e/fd/0fc7d20532fdaf769a25683617711png.png' }
])
</script>

<style scoped>
.profile-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
  height: 100vh;
  overflow-y: auto;
}


.profile-content {
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.username {
  font-size: 24px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #333;
}

.user-questions {
  margin-bottom: 20px;
}

.question-item {
  margin-bottom: 8px;
  color: #666;
}

/* 导航标签样式 */
.profile-tabs {
  margin-top: 20px;
}

.profile-tabs :deep(.el-tabs__nav-wrap)::after {
  height: 1px;
  background-color: #e4e7ed;
}

.profile-tabs :deep(.el-tabs__item) {
  font-size: 16px;
  height: 40px;
  line-height: 40px;
}

/* 内容区域样式 */
.tab-content {
  padding: 15px 0;
}

.post-item {
  margin-bottom: 20px;
  padding-bottom: 20px;
  border-bottom: 1px solid #f0f0f0;
}

.post-item:last-child {
  border-bottom: none;
}

.post-header {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
  color: #666;
}

.post-username {
  font-weight: bold;
}

.post-content h4 {
  margin: 8px 0;
  color: #333;
}

.post-content p {
  color: #666;
  line-height: 1.6;
}

.post-actions {
  margin-top: 12px;
  display: flex;
  gap: 16px;
  color: #909399;
}

.action-item {
  cursor: pointer;
  font-size: 14px;
}

.action-item:hover {
  color: #409EFF;
}

.empty-tab {
  padding: 40px 0;
  text-align: center;
  color: #999;
}

.collection-info {
  padding: 15px 0;
}

.info-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 8px 0;
}

.info-label {
  color: #666;
}

.info-value {
  color: #333;
  font-weight: 500;
}

.collections-list {
  margin-top: 20px;
}

.collection-item {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
}

.collection-item h4 {
  margin-bottom: 6px;
  color: #333;
}

.collection-item p {
  color: #999;
  font-size: 14px;
}

.article-item {
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.article-title {
  margin-bottom: 8px;
  color: #333;
}

.article-summary {
  color: #666;
  margin-bottom: 12px;
  line-height: 1.6;
}

.article-meta {
  display: flex;
  gap: 16px;
  color: #909399;
  font-size: 14px;
}

.boiling-item {
  padding: 16px 0;
  border-bottom: 1px solid #f0f0f0;
}

.boiling-item p {
  color: #333;
  line-height: 1.6;
  margin-bottom: 8px;
}

.boiling-meta {
  display: flex;
  gap: 16px;
  color: #909399;
  font-size: 14px;
}

/* 个人成就卡片 */
.achievement-card {
  background-color: #fff;
  border-radius: 4px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

.sticky-card {

  top: 20px;
  position: sticky;
}

.achievement-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 16px;
  color: #333;
}

.achievement-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  padding: 8px 0;
}

.achievement-label {
  color: #666;
}

.achievement-value {
  color: #333;
  font-weight: 500;
}

.visitors-list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 12px;
}

.visitor-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 60px;
}

.visitor-name {
  font-size: 12px;
  margin-top: 4px;
  color: #666;
  text-align: center;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.el-divider {
  margin: 16px 0;
  background-color: #f0f0f0;
}
</style>
